import React from 'react'
import { NavBar, Button, List } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import styles from './css/order.module.css'
import dayjs from 'dayjs'

const Order = () => {
    const nav = useNavigate()
    const { state } = useLocation()
    const date = dayjs().format("YYYY-MM-DD")

    // 数据
    const data = [
        {
            id: 1,
            name: "啊召",
            code: '410881199809076017'
        },
        {
            id: 2,
            name: "赵四",
            code: '801881199809075555'
        },
        {
            id: 3,
            name: "张三",
            code: '541881199809076666'
        },
    ]
    
    const getbtn=(v)=>{
      data.splice(v, 1)
    }

    // 去支付
    const getzf=()=>{
        nav("/zf",{state})
    }
    return (
        <div>
            <NavBar onBack={() => nav(-1)}>填写订单</NavBar>
            <div>
                <dl className={styles.dl}>
                    <dt>
                        <div>{state.start}—{state.end}</div>
                        <div>{date}</div>
                    </dt>
                    <dd>
                        <div>{state.startTime}</div>
                        <div>时刻表</div>
                    </dd>
                    <dd>
                        <div>二等座:{state.tick.secondTick}</div>
                        <div>一等座:{state.tick.firstTick}</div>
                        <div>商务座:{state.tick.vip}</div>
                    </dd>
                </dl>
            </div>


            <div>
                <Button color='primary' fill='solid'>
                    乘车人
                </Button>

                <div className={styles.cr}>
                    <List className={styles.list}>
                        {
                            data.map((v, i) => {
                                return <List.Item key={i} className={styles.listItem}>
                                    <div>
                                        <div>姓名:{v.name}</div>
                                        <div>身份证:{v.code}</div>
                                    </div>
                                    <div>
                                        <Button color='danger' className={styles.btn} onClick={()=>getbtn(v)}>删除</Button>
                                    </div>
                                </List.Item>
                            })
                        }
                    </List>
                </div>
            </div>

        <Button color='primary' onClick={()=>getzf()}>去支付</Button>


        </div>
    )
}

export default Order
